<template>
    <div class="wedding">
      <top></top>
         <div class="weddingCon">
        <div class="title">

        </div>
        <ul>
            <li>
                <router-link to="/weddingList"></router-link>
            </li>
            <li>
                <!-- <a href=""></a> -->
            </li>
            <li>
                <!-- <a href=""></a> -->
            </li>
            <li>
                <!-- <a href=""></a> -->
            </li>
        </ul>
    </div>
    </div>
</template>
<script>
import top from "../top";
export default {
  data() {
    return {
      
    };
  },
  components: {
    top
  }
};
</script>
<style>
@import url("../../assets/css/base.css");
.wedding{
     background-color: #121212;
}
.weddingCon {
  margin: 0 250px;
  background-color: #121212;
}

.weddingCon .title {
  width: 700px;
  height: 110px;
  background: url("../../assets/images/title.png") no-repeat;
  margin: 0 auto;
}

.weddingCon ul {
  width: 100%;
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.weddingCon li {
  width: 340px;
  height: 580px;
  margin-right: 10px;
  transition: all 0.5s;
}

.weddingCon li a {
  display: block;
  width: 100%;
  height: 100%;
}

.weddingCon li:first-child {
  background: url("../../assets/images/siyi.png") no-repeat;
  background-size: contain;
}

.weddingCon li:nth-child(2) {
  background: url("../../assets/images/caizhuang.png") no-repeat;
  background-size: contain;
}

.weddingCon li:nth-child(3) {
  background: url("../../assets/images/shexiang.png") no-repeat;
  background-size: contain;
}

.weddingCon li:last-child {
  margin-right: 0;
  background: url("../../assets/images/sheying.png") no-repeat;
  background-size: contain;
}

.weddingCon li:hover {
  transform: scale(1.1, 1.2);
  transition: all 0.5s;
}
</style>

